<template>
  <el-card>
    <div class="my-box">
      <h4 class="df aic jcsb">管理员信息</h4>
      <p><span>管理员ID:</span>{{ id }}</p>
      <p><span>账号:</span>{{ num }}</p>
      <p><span>用户组:</span>{{ type }}</p>
      <p><span>创建时间:</span>{{ time }}</p>
      <p class="df aic">
        <span>用户头像:</span>
        <el-upload
          class="avatar-uploader"
          action="http://127.0.0.1:5000/users/avatar_upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :data="imgobj"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </p>
    </div>
  </el-card>
</template>

<script>
import { getacc } from "@/apis/users";
import { getYYYYMMDD, bus } from "@/utils/utils";
export default {
  data() {
    return {
      uid: 0,
      id: "",
      num: "",
      type: "",
      time: "",
      obj: {},
      timer: "",
      imgobj: { id: localStorage.userID },
      str: "",
      imageUrl: "",
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      //头像上传成功后,通知index刷新头像
      bus.$emit("header", this.imageUrl);
    },
  },
  created() {
    this.uid = JSON.parse(localStorage.getItem("userID"));
    console.log(localStorage.userID);
    getacc({ id: this.uid }).then((res) => {
      this.obj = res.data.accountInfo;
      this.timer = new Date(this.obj.ctime);
      this.timer = getYYYYMMDD(this.timer);
      this.id = this.obj.id;
      this.num = this.obj.account;
      this.type = this.obj.userGroup;
      this.imageUrl = this.obj.imgUrl;
    });
  },
};
</script>

<style lang="less" scoped>
.my-box {
  width: 100%;
  padding: 10px 20px;
  h4 {
    line-height: 55px;
    border-bottom: 1px solid #ccc;
  }
  p {
    padding: 10px;
    line-height: 35px;
    border-bottom: 1px solid #eee;
    span {
      margin-right: 15px;
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }
}
</style>